<!doctype html>
<html lang="en">
  <head>
    <title>vue操作</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
    <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
crossorigin="anonymous">
  </head>
  <body>
       
    <div class="container"  id="app" >
       <!-- {{}}将vue对象中data的title这个数据展示在这个位置-->
       <h2>{{title}}</h2>
        <div class="form-group">
            <!-- v-model：是vue的指令，将当前这个输入框的值
                绑定到vue对象的data数据的task上.将task的值绑定到这个输入框上
            双向绑定 -->
          <input type="text" v-model="task" class="form-control" name="account" 
id="account" placeholder="请输入今天要做的事情">
        </div>
        <!-- @click="addTask()" 表示点击按钮的时候执行addTask这个函数 -->
        <button type="button"  @click="addTask()"  class="btn btn-primary btn-lg 
btn-block offset-4 col-md-3">提交</button>
       <!-- v-for：用于循环数组 
      v-for="(循环出来的每一项的名字,下标) in 数组的名字"-->
      
        <ul class="list-group">
            <li class="list-group-item " 
            v-for="(tas, index) in alltask" 
            :key="index">{{tas}}<!--循环数组拿到每一项，进行展示--></li>
        </ul>
{{}}：用于展示vue中数据在页面，所有的数据需要展示都使用{{}}展示
v-model:用于绑定输入框等表单标签的值，获取表单标签的值
v-for:用于循环数组，展示数据
        <button type="button" @click="clearTask()"  class="btn btn-danger btn-lg 
btn-block offset-4 col-md-3">清除上述所有的任务</button>
    </div>
    <!-- 引入的vue的js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
crossorigin="anonymous"></script>
    <script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
crossorigin="anonymous"></script>
  </body>
</html>
<script>
  
    //vuecreate快捷--Vue.createApp这是vue的函数，创建了一个vue的对象.这个对象的名字叫做
app
   new Vue({
        el:"#app",
        //data快捷-----所有的数据都写在data中
        data() {
            return {
                //写数据，key:value的格式写数据
                title:"vue的入门---limin",
                task:"data中的数据",
                alltask:['早起吃早餐','上课不迟到','上课认真听课'],
            }
        },
        // 所有的函数操作都写在这个位置
        methods: {
            addTask:function(){ //addTask函数\
              //  this.task; //因为task这个data中的数据和输入框绑定。获取这个输入框的值
              this.alltask.push( this.task);
              //将task的值添加到alltask这个数组中。使用this获取数组中的数据
              this.task = ""; //绑定输入框，输入框清空
            },
            clearTask:function(){
              this.alltask = [];
            }
        },
    })
    // 将vue这个对象的所有数据和操作渲染到id为app的这个标签内
</script>
